<template>
  <div class="app-container">
    <p class="pTitle">菜品销售信息</p>
    <el-form :model="salesForm" :inline="true" class="modalform" >
      <el-form-item label="店铺:" >
        <span>{{salesForm.poiname}}</span>
      </el-form-item>
      <el-form-item label="订单类型:" label-width="80px">
        <span>{{salesForm.ordertypename}}</span>
      </el-form-item>
      <el-form-item label="业务日期:" label-width="80px">
        <span>{{parseTime(salesForm.biztime)}}</span>
      </el-form-item>
      <el-form-item label="组织:" label-width="65px">
        <span>{{salesForm.orgName}}</span>
      </el-form-item>
      <br>
      <el-form-item label="菜品:">
        <span>{{salesForm.dishname}}</span>
      </el-form-item>
      <el-form-item label="规格:" label-width="50px">
        <span>{{salesForm.dishspec}}</span>
      </el-form-item>
      <el-form-item label="销售数量:" label-width="80px">
        <span>{{salesForm.dishsalecnt}}{{salesForm.dishunitname}}</span>
      </el-form-item>
      <el-form-item label="菜品原价:" label-width="80px">
        <span>{{salesForm.dishsaleamt}}元</span>
      </el-form-item>
      <el-form-item label="菜品优惠:" label-width="80px">
        <span>{{salesForm.dishcmpgnamt}}元</span>
      </el-form-item>
      <el-form-item label="税额:" label-width="50px">
        <span>{{salesForm.taxamt}}</span>
      </el-form-item>
      <el-form-item label="不含税收入:" label-width="90px">
        <span>{{salesForm.notaxincomeamt}}元</span>
      </el-form-item>
      <el-form-item label="状态:" label-width="50px">
        <span>{{salesForm.statusName}}</span>
      </el-form-item>
    </el-form>
    <p class="pTitle">菜品ERP信息</p>

    <el-form :model="salesForm" :inline="true" class="modalform">
      <el-form-item label="ERP部门:" >
        <span>{{salesForm.deptName}}</span>
      </el-form-item>
      <el-form-item label="ERP库房:" >
        <span>{{salesForm.storeroomname}}</span>
      </el-form-item>
      <el-form-item label="ERP库间:" >
        <span>{{salesForm.storehousename}}</span>
      </el-form-item>
      <el-form-item label="ERP产品:" >
        <span>{{salesForm.productname}}</span>
      </el-form-item>
      <el-form-item label="ERP物料:" >
        <span>{{salesForm.spname}}</span>
      </el-form-item>
      <el-form-item label="ERP数量:" >
        <span>{{salesForm.erpWeight}}{{salesForm.stockunitname}}</span>
      </el-form-item>
      <el-form-item label="ERP单价:" >
        <span v-if="salesForm.erpPrice">{{salesForm.erpPrice}}元</span>
      </el-form-item>
    </el-form>

    <p class="pTitle">菜品消耗信息</p>
      <el-table :data="salesItemList" v-loading="loading">
        <el-table-column label="美团物品编码" align="center" prop="mtGoodsCode" width="90"/>
        <el-table-column label="美团物品" align="center" prop="mtGoodsName"/>
        <el-table-column label="数量" align="center" prop="amount" width="85">
          <template slot-scope="scope">
            <span>{{scope.row.amount}}{{scope.row.baseunitName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="ERP库房" align="center" prop="storeroomname" />
        <el-table-column label="ERP库间" align="center" prop="storehousename" width="80"/>
        <el-table-column label="ERP产品" align="center" prop="productname" width="100"/>
        <el-table-column label="ERP物料" align="center" prop="spname"/>
        <el-table-column label="ERP数量" align="center" prop="erpWeight" width="90">
          <template slot-scope="scope">
            <span>{{scope.row.erpWeight}}{{scope.row.stockunitname}}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark"/>
      </el-table>
  </div>
</template>
<style scoped>
.pTitle{
  color: #a7a199;
  font-size: 13px;
}
</style>
<script>
import { listSales,} from "@/api/mt/sales";
import {listSalesItem} from '@/api/mt/salesItem'

export default {
  name: "mtSalesItem",
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 美团门店菜品销售主表格数据
      salesForm: {},
      //菜品销售详情列表
      salesItemList:[],
      saleStatus:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      id:'',
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
    this.id=this.$route.query.id;
    this.getDicts("mt_sales_status").then(response=>{
      this.saleStatus=response.data;
      this.saleStatus.map(item=>{
        if (item.dictValue==this.salesForm.status){
          this.salesForm.statusName=item.dictLabel;
        }
      })
    });
    this.getSaleInfo(this.id);
  },
  methods: {
    getSaleInfo(id){
      this.loading=true;
      listSalesItem({mtSalesid:id}).then(response=>{
        if (response.code==200){
          this.salesItemList=response.rows;
          this.loading=false;
        }
      })
    },
    /** 查询美团门店菜品销售主列表 */
    getList() {
      listSales({id:this.id}).then(response => {
        if (response.code==200){
          this.salesForm = response.rows[0];
        }
      });
    },
  }
};
</script>
